<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .fdj{
            width: 1000px;
            margin: auto;
            display: flex;
        }
        .left {
            width: 400px;
        }
        .leftTop {
            width: 400px;
            height: 400px;
            position: relative;
        }
        .leftTop  img {
            width: 400px;
            height: 400px;
        }
        .shadow {
            width: 200px;
            height: 200px;
            background: rgba(0,0,0,0.5);
            position: absolute;
            top: 0;
            visibility: hidden;
            cursor: move;

            /* 阻止这个盒子成为目标源 */
            pointer-events: none;
        }
        .leftBottom {
            display: flex;
        }
        .leftBottom img {
            width: 100px;
            height: 100px;
            margin: 10px;
        }
        .right {
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
            margin-left: 50px;
            visibility: hidden;
        }
        .right img {
            width: 1000px;
            height: 1000px;
            position: absolute;
        }
    </style>
</head>
<body>

    <div class="fdj">
        <div class="left">
            <div class="leftTop">
                <img src="https://t7.baidu.com/it/u=3332251293,4211134448&fm=193&f=GIF" alt="">
                <div class="shadow"></div>
            </div>
            <div class="leftBottom">
                <img src="https://t7.baidu.com/it/u=3332251293,4211134448&fm=193&f=GIF" alt="">
                <img src="https://t7.baidu.com/it/u=2141219545,3103086273&fm=193&f=GIF" alt="">
                <img src="https://t7.baidu.com/it/u=993577982,1027868784&fm=193&f=GIF" alt="">
            </div>
        </div>
        <div class="right">
            <img src="https://t7.baidu.com/it/u=3332251293,4211134448&fm=193&f=GIF" alt="">
        </div>
    </div>

    <script>

        // 左边遮罩层与左图的比例 = 右盒子与大图的比例

        // 遮罩层和大图都是默认隐藏的

        // display:none  隐藏元素以后获取不到相关属性(宽高)


        // 在计算小盒子的鼠标跟随的时候   小盒子不能成为目标源  pointer-events:none

        

        const get = el => document.querySelector(el);

        const getCss = (ele, prop) => parseInt(getComputedStyle(ele)[prop]);


        const setCss = (ele, options) => {
            for (let prop in options) {
                // ele.style.left = '100px'
                ele.style[prop] = options[prop];
            }
        }


        function Mirror(el) {
            this.oBox = document.querySelector(el) ;
            this.oShadow = this.oBox.querySelector('.shadow') ;
            this.oLeft = this.oBox.querySelector('.leftTop') ;
            this.oSmallImg = this.oBox.querySelector('.leftTop img') ;
            this.oRight = this.oBox.querySelector('.right') ;
            this.oBigImg = this.oBox.querySelector('.right img') ;
            this.oSmallImgs = this.oBox.querySelectorAll('.leftBottom img') ;

            this.r = this.oShadow.offsetWidth / 2 ;
            this.maxW = this.oLeft.clientWidth - this.oShadow.offsetWidth ;
            this.maxH = this.oLeft.clientHeight - this.oShadow.offsetHeight ;


            // 右边的最大移动范围
            this.rightMaxW = this.oBigImg.clientWidth - this.oRight.offsetWidth ;
            this.rightMaxH = this.oBigImg.clientHeight - this.oRight.offsetHeight ;


            this.scaleX = this.rightMaxW / this.maxW ;
            this.scaleY = this.rightMaxH / this.maxH ;
            
            // 鼠标移入移除
            this.hover() ;

            // 小图切换
            this.smallImgChange() ;
        }

        Mirror.prototype.hover = function() {
            this.oLeft.onmouseover = () => {
                setCss(this.oShadow , {
                    visibility : 'visible'
                })
                setCss(this.oRight , {
                    visibility : 'visible'
                })
                // 鼠标移入之后做鼠标跟随
                this.move()
            }
            this.oLeft.onmouseout = () => {
                setCss(this.oShadow , {
                    visibility : 'hidden'
                })
                setCss(this.oRight , {
                    visibility : 'hidden'
                })
            }
        }

        // 鼠标跟随
        Mirror.prototype.move = function() {
            this.oLeft.onmousemove = e => {
                let x = e.offsetX - this.r ;
                let y = e.offsetY - this.r ;
                // 判断边界
                if(x < 0) x = 0 ; 
                if(y < 0 ) y = 0 ;
                if(x > this.maxW) x = this.maxW ;
                if(y > this.maxH) y = this.maxH ;
                setCss(this.oShadow , {
                    left : x + 'px' ,
                    top : y + 'px'
                })
                setCss(this.oBigImg , {
                    left : -x * this.scaleX + 'px' ,
                    top : -y * this.scaleY + 'px'
                })
            }
        }


        // 
        Mirror.prototype.smallImgChange = function() {
            for(let i = 0 ; i < this.oSmallImgs.length ; i++) {
                const _this = this ;  // 指向实例化对象      ---------------------------------------
                this.oSmallImgs[i].onmouseover = function() {    // 需要使用绑定事件的这个对象this   不能使用箭头函数
                    // 切换大图   大图的路径和小图的路径相同
                    _this.oSmallImg.src = this.src ;
                    _this.oBigImg.src = this.src ;
                }
            }
        }

        new Mirror('.fdj')

    </script>
    
</body>
</html>